/* eslint-disable react/jsx-pascal-case */
import React ,{useEffect,useState} from 'react'
import {RootState,RootDispatch} from "../../utils/index"
import {useDispatch,useSelector} from "react-redux"
import My_content from "../../components/My_content"
import { DropdownMenu } from 'react-vant'
import {filter_data,sort_data} from "../../api/index"
type Props = {}

const Frout_end = (props: Props) => {
  const [value, setValue] = useState<Record<string, string | number>>({})
  const option = [
    { text: "推荐", value: "推荐" },
    { text: "最新", value: "最新" },
    { text: "热榜", value: "热榜" },
  ]
  const option1 = [
    { text: "从低到高", value: "从低到高" },
    { text: "从高到低", value: "从高到低" },
  ]
  const dispatch:RootDispatch = useDispatch()
  const {children_data} = useSelector((state:RootState)=>state)
  return (
    <div>
      <DropdownMenu value={value} onChange={v => {
          console.log(v);
          setValue(v)
          v.filter?dispatch(filter_data(v.filter as string)):dispatch(sort_data(v.sort as string))
          setValue({})
        }}>
        <DropdownMenu.Item  name='filter' options={option} />
        <DropdownMenu.Item name='sort' options={option1} />
    </DropdownMenu>
      <My_content data_content={children_data}/>
    </div>
  )
}

export default Frout_end